<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input v-model="params.poleName" clearable placeholder="请输入一体杆名称" class="search-main" />
      <span class="search-label">一体杆编号：</span>
      <el-input v-model="params.poleNumber" clearable placeholder="请输入一体杆编号" class="search-main" />
      <span class="search-label">运行状态：</span>
      <el-select v-model="status1">
        <el-option
          v-for="item in cardStatusList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
      <el-button
        type="primary"
        class="search-btn"
        @click="doSearch"
      >查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="increaseForm">添加一体杆</el-button>
      <el-button>批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="manageList">
        <el-table-column type="index" label="序号" />
        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="一体杆IP" prop="poleIp" />
        <el-table-column label="安装区域" prop="areaId" />
        <el-table-column label="一体杆类型" prop="poleType" :formatter="formatStatus1" />
        <el-table-column label="运行状态" prop="status1" :formatter="formatStatus" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="{row}">
            <el-button size="mini" type="text" @click="editRodmanageList(row)">编辑</el-button>
            <el-button size="mini" type="text" @click="deleteRodmanageList(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
      />
    </div>
    <!-- 添加一体杆 -->
    <el-dialog
      :title="`${addForm.id ? '编辑一体杆':'添加一体杆'}`"
      width="580px"
      :visible="dialogVisible"
      @close="closeialog"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="rules">
          <el-form-item label="一体杆名称" prop="poleName">
            <el-input v-model="addForm.poleName" placeholder="请输入一体杆名称" />
          </el-form-item>
          <el-form-item label="一体杆编号" prop="poleNumber">
            <el-input v-model="addForm.poleNumber" placeholder="请输入一体杆编号" />
          </el-form-item>
          <el-form-item label="一体杆IP" prop="poleIp">
            <el-input v-model="addForm.poleIp" placeholder="请输入一体杆IP" />
          </el-form-item>
          <el-form-item label="关联区域" prop="areaId">
            <el-select v-model="addForm.areaId" placeholder="请选择">
              <el-option
                v-for="item in roleList"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="一体杆类型" prop="poleType" :formatter="formatStatus1">
            <el-select v-model="addForm.poleType" placeholder="请选择">
              <el-option
                v-for="item in cardStatusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addRodmanageList">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getRodmanageListAPI, addRodmanageListAPI, editRodmanageListAPI, deleteRodmanageListAPI, selectAPI } from '@/api/rodmanage'
export default {
  data() {
    return {
      // 接口
      params: {
        page: 1,
        pageSize: 10,
        poleName: '',
        poleNumber: '',
        poleIp: '',
        poleStatus: ''
      },
      // 分页
      status1: '',
      page: 1,
      pageSize: 10,
      total: 0,
      // 要遍历的空数组
      manageList: [],
      // 下拉列表-关联区域
      roleList: [],
      // 添加表单
      // 弹窗状态
      dialogVisible: false,
      // 一体杆类型
      cardStatusList: [
        { id: 'entrance', name: '入口' },
        { id: 'export', name: '出口' }
      ],
      // 运行状态
      cardStatusList1: [
        { id: null, name: '全部' },
        { id: 0, name: '正常' },
        { id: 1, name: '异常' }
      ],

      // 新增表单
      addForm: {
        poleName: '',
        poleNumber: '',
        polelp: '',
        areaId: '',
        poleType: ''
      },
      // 校验规则
      rules: {
        poleName: [
          { required: true, message: '请输入一体杆名称', trigger: 'blur' }
        ],
        poleNumber: [{
          required: true, message: '请输入一体杆编号', trigger: 'blur'
        }],
        poleIp: [{
          required: true, message: '请输入一体杆IP', trigger: 'blur'
        }],
        areaId: [{
          required: true, message: '请选择关联区域', trigger: 'blur'
        }],
        poleType: [{
          required: true, message: '请选择一体杆类型', trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
    this.getRodmanageList() // 渲染表格
    this.select() // 下拉列表
  },
  methods: {
    // 一体杆类型
    formatStatus1(row) {
      const MAP = {
        entrance: '入口',
        export: '出口'
      }
      return MAP[row.poleType]
    },
    // 运行状态
    formatStatus(row) {
      const MAP1 = {
        0: '正常',
        1: '异常'
      }
      return MAP1[row.poleStatus]
    },
    // 查询
    doSearch() {
      this.params.page = 1
      this.getRodmanageList()
    },

    // 渲染列表
    async getRodmanageList() {
      const res = await getRodmanageListAPI(this.params)
      this.manageList = res.data.rows
      this.total = res.data.total
    },
    // 添加一体杆
    increaseForm() {
      this.dialogVisible = true
    },
    // 下拉列表 关联区域
    async select() {
      const res = await selectAPI()
      console.log(res)
      this.roleList = res.data
    },
    // 点击添加
    addRodmanageList() {
      // 1.表单兜底校验
      this.$refs.addForm.validate(async(val) => {
        if (!val) return // 校验不通过，中止
        // 如果有id 调用编辑接口
        if (this.addForm.id) {
          await editRodmanageListAPI({
            poleName: this.addForm.poleName,
            poleNumber: this.addForm.poleNumber,
            polelp: this.addForm.poleIp,
            areaId: this.addForm.areaId,
            poleType: this.addForm.poleIp
          })
          this.$message.success('编辑成功')
        } else {
          // 如果没有id 调用新增表单接口
          await addRodmanageListAPI(this.addForm)
          this.$message.success('添加成功')
        }
        this.getRodmanageList()
        this.dialogVisible = false
        this.$refs.addForm.resetFields()
      })
    },
    // 点击编辑
    editRodmanageList(row) {
      this.dialogVisible = true
      this.addForm = row
    },
    // 关闭弹窗
    closeialog() {
      this.dialogVisible = false
      this.addForm = ''
      this.addForm.id = ''
    },
    // 删除
    deleteRodmanageList(id) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteRodmanageListAPI(id)
        this.$message.success('删除成功')
        this.getRodmanageList()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>

